React – Pass Data From Child to Parent and Parent to Child Component

Today in this article we shall learn how to perform component interactions in React UI framework application. You may find a need to Pass Data From One Component to another Component including React – Pass Data From One Component to Other Component with Child to Parent Component from parent to child communication

We shall cover below basic aspects in today’s article,

Before we get started I am assuming you already have a basic understanding of React applications.

If not, kindly go through a series of articles on React,

• Getting started with React

• Understanding Component with State and Props

Getting Started

Let’s get started step by step from basics to advanced topics.

What is Props System

Props are actually a short form of Properties. It’s a mechanism of passing the data from Parent components to child components. Using Props data must flow uni-directionally.

Using Props data must flow uni-directionally i.e Parent to Child only

This data transfer happens in two stages. In the first stage, we provide information from the parent to the child components.

So let’s first focus on how we provide information from the parent to the child and then in the second stage we will see how the Child Component consumes or makes use of that information.

I shall be using very basic two components defined as below,

• Parent Component – UserComponent
• Child Component – MovieComponent

Create Parent Component – UserComponent

Let’s create a simple Parent Component – UserComponent as below,

class UserComponent extends React.Component {

  render() {
    return (
      <div className="content">
        Hi There, UserComponent
      </div>
    );
  }
}

export default UserComponent;

Create Child Component – MovieComponent

Similarly, Let’s create a simple Child Component – MovieComponent as below,

class MovieComponent extends React.Component {
  render() {

    return (
      <div className="content">
        Hi There, MovieComponent
      </div>
    );
  }
}

export default MovieComponent;

Now, these components are currently independent and there is no parent-child relationship so far,

Below is index.json referencing them individually,

ReactDOM.render(
  <React.StrictMode>

    <UserComponent/>
    <MovieComponent/>

  </React.StrictMode>,
  document.getElementById('root')
);

Once you launch the app, you shall see both components execute and produce the below result,

So far so good !!

Let’s now define the relationship which Parent to Child relationship!

Naming Pattern for Props

Before doing that let’s understand the naming convention and patterns that needs to be used while using props in the component.

Lets’ see a few examples,

Example,

<ChildComponent  userName ="TheCodeBuzz"/>

<MovieComponent movieName ="Animators"/>

React Parent to Child Component using Props

Let’s update the above-discussed component for Parent to Child communication. Our goal here would be to transfer data from Parent Component UserComponent to the Child component i.e MovieComponent

Update code on Parent as below,

class UserComponent extends React.Component {

  render() {
    return (
      <div className="content">

        <div> Hi There, UserComponent</div>

        <MovieComponent movie="Animators" />

      </div>
    );
  }
}

export default UserComponent;

So what we did above as below,

• Above we have defined our Props name as movie to pass the data to the child component.

• UserComponent should be able to pass the movie object which has a value of “Animators” defined using the expression MovieComponent movie=”Animators”

Similarly, we shall be retrieving the same Props i.e movie in the Child component as below,

class MovieComponent extends React.Component {
  render() {

    return (
      <div className="content">
        <div>Hi There, MovieComponent</div>

        Movie selected by User: {this.props.movie}

      </div>
    );
  }
}

export default MovieComponent;

So what we did above as below,

• Child consumes or makes use of Parent information using Props

• Retrieves the same Props i.e movie in the Child component

Once executed, the app shall below result on the UI,

That’s All!

I have discussed Child to Parent communication in the below article,

References

• React- Child to Parent communication

I shall be covering Redux Architecture and its usage in my next article! Until then stay tuned!

Do you have any comments or ideas or any better suggestions to share?

Please sound off your comments below.

Happy Coding !!

Summary

Today in this article we understood how Component interacts in React programming. We understood the prop system and understood the naming pattern and used it for passing data from Parent to Child.

Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published(2024) best practices and guidelines for software design and development.